<template>
	<view class="container">
		<!-- 顶部导航栏 - 横向滑动 -->
		<view class="tab-banner">
			<scroll-view class="tab-scroll" scroll-x="true" show-scrollbar="false">
				<view class="tab-box">
					<view 
						v-for="(item, index) in newsTabs" 
						:key="index"
						class="tab-item"
						:class="{ active: currentTab === index }"
						@click="switchTab(index)"
					>
						{{ item }}
					</view>
				</view>
			</scroll-view>
		</view>

		
		<view class="header-section">
			<!-- 天气预报 - 左侧 -->
			<view class="weather-info" @click="refreshWeather">
				<view class="weather-main">
					<text class="weather-temp">{{ weatherData.temperature }}°C</text>
					<text class="weather-desc">{{ weatherData.weather }}</text>
				</view>
				<view class="weather-location">
					<text class="location-name">{{ weatherData.city }}</text>
					<text class="weather-pm">PM2.5 {{ weatherData.pm25 }}</text>
				</view>
				<view class="weather-refresh">
					<text class="refresh-text">{{ weatherRefreshText }}</text>
				</view>
			</view>
			
			<!-- 搜索框 - 右侧 -->
			<view class="search-box">
				<view class="custom-search">
					<view class="search-icon">🔍</view>
					<input 
						v-model="searchKeyword" 
						class="search-input"
						placeholder="搜索关键词"
						@confirm="searchNews"
						@input="onSearchInput"
					/>
					<view v-if="searchKeyword" class="clear-btn" @click="clearSearch">×</view>
				</view>
			</view>
		</view>

		<!-- 刷新提示 -->
		<view class="refresh-tip" v-if="showRefreshTip">
			<text>为您更新了{{ updateCount }}条内容</text>
		</view>

		<!-- 新闻列表 -->
		<scroll-view 
			scroll-y="true" 
			class="news-list"
			@refresherrefresh="onRefresh"
			refresher-enabled="true"
			:refresher-triggered="refreshing"
		>
			<view v-for="item in filteredContentList" :key="item.id" class="news-item">
				
				<cardviewtext 
					v-if="item.type === 'news'" 
					:news-data="item"
					@click="goToNewsDetail(item)"
				>
					<template v-slot:search v-if="item.sslot">
						<view class="search-content">
							<text class="search-text">搜索: 今日金价 精选好物</text>
						</view>
					</template>
				</cardviewtext>

			
				<view v-else-if="item.type === 'ad'" class="ad-card" @click="handleAdClick(item)">
					<view class="ad-header">
						<text class="ad-tag">广告</text>
						<text class="ad-source">{{ item.source }}</text>
					</view>
					<text class="ad-title">{{ item.title }}</text>
					<view class="ad-images">
						<image 
							v-for="(img, index) in item.images" 
							:key="index" 
							:src="getImageUrl(img)" 
							class="ad-image"
							mode="aspectFill"
						></image>
					</view>
				</view>
			</view>
			
			
			<view v-if="searchKeyword && filteredContentList.length === 0" class="no-result">
				<text>没有找到与"{{ searchKeyword }}"相关的内容</text>
			</view>
		</scroll-view>

		<!-- 评论模态框 -->
		<view class="comment-modal" v-if="showCommentModal">
			<view class="modal-mask" @click="closeCommentModal"></view>
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">评论</text>
					<text class="modal-close" @click="closeCommentModal">×</text>
				</view>
				
				<scroll-view class="comment-list" scroll-y="true">
					<view v-for="comment in currentComments" :key="comment.id" class="comment-item">
						<image :src="comment.avatar" class="comment-avatar" mode="aspectFill"></image>
						<view class="comment-content">
							<text class="comment-user">{{ comment.userName }}</text>
							<text class="comment-text">{{ comment.content }}</text>
							<text class="comment-time">{{ formatTime(comment.time) }}</text>
						</view>
					</view>
				</scroll-view>
				
				<view class="comment-input-area">
					<input 
						v-model="commentText" 
						class="comment-input" 
						placeholder="说点什么..."
						:disabled="!isLoggedIn"
						@confirm="submitComment"
					/>
					<button 
						class="comment-btn" 
						:class="{ disabled: !commentText || !isLoggedIn }"
						@click="submitComment"
					>
						{{ isLoggedIn ? '发送' : '请登录' }}
					</button>
				</view>
			</view>
		</view>

		<!-- 登录提示模态框 -->
		<view class="login-modal" v-if="showLoginModal">
			<view class="modal-mask" @click="closeLoginModal"></view>
			<view class="modal-content">
				<text class="login-title">登录提示</text>
				<text class="login-message">登录后即可评论、关注和收藏</text>
				<view class="login-buttons">
					<button class="login-btn cancel" @click="closeLoginModal">取消</button>
					<button class="login-btn confirm" @click="goToLogin">立即登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cardviewtext from '@/components/cardviewtext.vue'
	
	export default {
		components: {
			cardviewtext
		},
		data() {
			return {
				newsTabs: ['要闻', '推荐', '关注流', '24小时', '娱乐', '泉州', '台湾', '财经', '八卦'],
				currentTab: 0,
				searchKeyword: '',
				refreshing: false,
				showRefreshTip: false,
				updateCount: 0,
				isLoggedIn: false,
				showCommentModal: false,
				showLoginModal: false,
				commentText: '',
				currentNews: null,
				currentComments: [],
				weatherData: {
					temperature: '22',
					weather: '多云',
					city: '南安',
					pm25: '35',
					humidity: '65%',
					wind: '东南风2级'
				},
				weatherTimer: null,
				lastWeatherUpdate: null,
				weatherRefreshText: '刚刚更新',
				contentList: [
					{
						id: 0,
						type: 'news',
						title: "2020，我们温暖的记忆",
						isTop: true,
						source: "新闻联播",
						comments: 405,
						date: "2025.10.15",
						hasImage: false,
						content: "2020年是不平凡的一年，我们共同经历了疫情考验，也见证了无数温暖瞬间..."
					},
					{
						id: 1,
						type: 'news',
						title: "森林大县57年无大火是怎么做到的",
						isTop: true,
						source: "光明网",
						comments: 234,
						date: "2025.10.16",
						hasImage: false,
						content: "通过科学的森林管理和全民防火意识提升，该县创造了57年无重大森林火灾的纪录..."
					},
					{
						id: 2,
						type: 'news',
						title: "14个月从100家开到1000家门店，蜜雪冰城为何买下这家精酿啤酒商",
						isTop: false,
						source: "界面新闻",
						comments: 56,
						date: "2025.10.07",
						hasImage: true,
						imageUrl: "city3.jpg",
						content: "蜜雪冰城通过收购精酿啤酒品牌，进一步拓展饮品市场布局..."
					},
					{
						id: 3,
						type: 'news',
						title: "把握历史大势 共创美好未来(观沧海)",
						isTop: false,
						source: "人民日报",
						comments: 1025,
						date: "2025.10.25",
						hasImage: true,
						imageUrl: "city1.png",
						content: "在当前国际形势下，我们要准确把握历史发展大势，共同创造美好未来..."
					},
					{
						id: 4,
						type: 'news',
						title: "黄金还能走多远?卖方高呼'第三浪启动'，230多份研报看多",
						isTop: false,
						source: "财联社",
						sslot: true,
						comments: 452,
						date: "2025.10.08",
						hasImage: true,
						imageUrl: "city2.jpg",
						content: "黄金市场近期表现强劲，多家机构发布看多研报..."
					},
					{
						id: 5,
						type: 'ad',
						title: "加微信交友群，喜欢就聊，找喜欢的人",
						source: "广告 我主良缘文化",
						images: ["city4.jpg", "city5.jpg", "city3.jpg"]
					},
					{
						id: 6,
						type: 'news',
						title: "'没有短板'的完美战鹰!歼-16机库独家探访",
						isTop: false,
						source: "红星新闻",
						comments: 56,
						date: "2025.10.07",
						hasImage: true,
						imageUrl: "city1.png",
						content: "记者独家探访歼-16战机机库，深入了解这款'没有短板'的战机..."
					},
					{
						id: 7,
						type: 'news',
						title: "多国学者共探巴克特里亚考古 携手推进丝绸之路文明研究新进程",
						isTop: false,
						source: "中国日报网",
						comments: 56,
						date: "2025.10.12",
						hasImage: true,
						imageUrl: "city2.jpg",
						content: "国际考古学者齐聚一堂，共同探讨巴克特里亚文明与丝绸之路的关系..."
					}
				],
				originalContentList: []
			}
		},
		
		computed: {
			filteredContentList() {
				if (!this.searchKeyword) {
					return this.contentList;
				}
				
				const keyword = this.searchKeyword.toLowerCase();
				return this.contentList.filter(item => {
					if (item.type === 'news') {
						return item.title.toLowerCase().includes(keyword) || 
							   (item.content && item.content.toLowerCase().includes(keyword));
					}
					return false;
				});
			}
		},
		
		onLoad() {
			this.originalContentList = [...this.contentList];
			this.initWeatherData();
			this.setupWeatherAutoRefresh();
			this.checkLoginStatus();
		},
		
		onUnload() {
			if (this.weatherTimer) {
				clearInterval(this.weatherTimer);
			}
		},
		
		onShow() {
			this.checkLoginStatus();
		},
		
		onPullDownRefresh() {
			this.onRefresh();
		},
		
		methods: {
			checkLoginStatus() {
				const userInfo = uni.getStorageSync('currentUser');
				const token = uni.getStorageSync('authToken');
				this.isLoggedIn = !!(userInfo && token);
			},
			
			async initWeatherData() {
				try {
					await this.fetchNanAnWeather();
					this.lastWeatherUpdate = new Date();
					this.updateRefreshText();
				} catch (error) {
					console.error('获取天气数据失败:', error);
					this.weatherData = {
						temperature: '22',
						weather: '多云',
						city: '南安',
						pm25: '35',
						humidity: '65%',
						wind: '东南风2级'
					};
				}
			},
			
			async fetchNanAnWeather() {
				return new Promise((resolve) => {
					setTimeout(() => {
						const now = new Date();
						const hour = now.getHours();
						let temperature, weather;
						
						if (hour >= 6 && hour < 12) {
							temperature = '22';
							weather = '晴';
						} else if (hour >= 12 && hour < 18) {
							temperature = '25';
							weather = '多云';
						} else {
							temperature = '20';
							weather = '阴';
						}
						
						this.weatherData = {
							temperature: temperature,
							weather: weather,
							city: '南安',
							pm25: Math.floor(Math.random() * 20 + 30).toString(),
							humidity: Math.floor(Math.random() * 20 + 60) + '%',
							wind: '东南风2级'
						};
						
						resolve();
					}, 500);
				});
			},
			
			setupWeatherAutoRefresh() {
				this.weatherTimer = setInterval(() => {
					this.refreshWeather();
				}, 30 * 60 * 1000);
			},
			
			async refreshWeather() {
				uni.showLoading({
					title: '更新天气中'
				});
				
				try {
					await this.fetchNanAnWeather();
					this.lastWeatherUpdate = new Date();
					this.updateRefreshText();
					
					uni.showToast({
						title: '天气已更新',
						icon: 'success'
					});
				} catch (error) {
					uni.showToast({
						title: '更新失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			
			updateRefreshText() {
				if (!this.lastWeatherUpdate) return;
				
				const now = new Date();
				const diffMinutes = Math.floor((now - this.lastWeatherUpdate) / (1000 * 60));
				
				if (diffMinutes < 1) {
					this.weatherRefreshText = '刚刚更新';
				} else if (diffMinutes < 60) {
					this.weatherRefreshText = `${diffMinutes}分钟前更新`;
				} else {
					const diffHours = Math.floor(diffMinutes / 60);
					this.weatherRefreshText = `${diffHours}小时前更新`;
				}
			},
			
			switchTab(index) {
				this.currentTab = index;
			},
			
			onSearchInput() {
			},
			
			searchNews() {
				console.log('搜索关键词:', this.searchKeyword);
			},
			
			clearSearch() {
				this.searchKeyword = '';
			},
			
			async onRefresh() {
				this.refreshing = true;
				
				try {
					await new Promise(resolve => setTimeout(resolve, 1000));
					await this.refreshWeather();
					this.shuffleContent();
					this.updateCount = Math.floor(Math.random() * 5) + 1;
					this.showRefreshTip = true;
					
					setTimeout(() => {
						this.showRefreshTip = false;
						this.refreshing = false;
						uni.stopPullDownRefresh();
					}, 3000);
					
				} catch (error) {
					this.refreshing = false;
					uni.stopPullDownRefresh();
				}
			},
			
			shuffleContent() {
				const shuffled = [...this.contentList];
				for (let i = shuffled.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
				}
				this.contentList = shuffled;
			},
			
			goToNewsDetail(newsItem) {
				this.recordBrowseHistory(newsItem);
				uni.navigateTo({
					url: `/pages/news-detail/news-detail?newsData=${encodeURIComponent(JSON.stringify(newsItem))}`
				});
			},
			
			recordBrowseHistory(newsItem) {
				if (!this.isLoggedIn) return;
				
				const userInfo = uni.getStorageSync('currentUser');
				if (!userInfo || !userInfo.id) return;
				
				const historyKey = `userHistory_${userInfo.id}`;
				let historyList = uni.getStorageSync(historyKey) || [];
				
				const existingIndex = historyList.findIndex(item => item.id === newsItem.id);
				if (existingIndex !== -1) {
					historyList.splice(existingIndex, 1);
				}
				
				const historyItem = {
					...newsItem,
					browseTime: new Date().toISOString()
				};
				
				historyList.unshift(historyItem);
				
				if (historyList.length > 50) {
					historyList = historyList.slice(0, 50);
				}
				
				uni.setStorageSync(historyKey, historyList);
			},
			
			handleComment(item) {
				if (!this.isLoggedIn) {
					this.showLoginModal = true;
					return;
				}
				
				this.currentNews = item;
				this.loadComments(item.id);
				this.showCommentModal = true;
			},
			
			loadComments(newsId) {
				this.currentComments = [
					{
						id: 1,
						userName: '用户1',
						avatar: '/static/avatars/default-avatar.png',
						content: '这个新闻很有意义！',
						time: new Date().toISOString()
					},
					{
						id: 2,
						userName: '用户2',
						avatar: '/static/avatars/default-avatar.png',
						content: '点赞支持！',
						time: new Date(Date.now() - 1000 * 60 * 30).toISOString()
					}
				];
			},
			
			submitComment() {
				if (!this.isLoggedIn || !this.commentText.trim()) return;
				
				const userInfo = uni.getStorageSync('currentUser');
				const newComment = {
					id: Date.now(),
					userName: userInfo.username || '用户',
					avatar: userInfo.avatar || '/static/avatars/default-avatar.png',
					content: this.commentText,
					time: new Date().toISOString()
				};
				
				this.currentComments.unshift(newComment);
				this.commentText = '';
				
				const index = this.contentList.findIndex(item => item.id === this.currentNews.id);
				if (index !== -1) {
					this.contentList[index].comments = (this.contentList[index].comments || 0) + 1;
				}
				
				uni.showToast({
					title: '评论成功',
					icon: 'success'
				});
			},
			
			handleFollow(item) {
				if (!this.isLoggedIn) {
					this.showLoginModal = true;
					return;
				}
				
				const index = this.contentList.findIndex(news => news.id === item.id);
				if (index !== -1) {
					this.contentList[index].followed = !this.contentList[index].followed;
					this.updateFollowCount(this.contentList[index].followed);
					
					uni.showToast({
						title: this.contentList[index].followed ? '关注成功' : '已取消关注',
						icon: 'success'
					});
				}
			},
			
			updateFollowCount(isFollow) {
				const userInfo = uni.getStorageSync('currentUser');
				if (userInfo) {
					userInfo.followCount = (userInfo.followCount || 0) + (isFollow ? 1 : -1);
					uni.setStorageSync('currentUser', userInfo);
				}
			},
			
			closeCommentModal() {
				this.showCommentModal = false;
				this.commentText = '';
				this.currentComments = [];
			},
			
			closeLoginModal() {
				this.showLoginModal = false;
			},
			
			goToLogin() {
				uni.setStorageSync('loginRedirect', '/pages/index/index');
				uni.navigateTo({
					url: '/pages/case/dengru/dengru'
				});
				this.closeLoginModal();
			},
			
			handleAdClick(adItem) {
				uni.showModal({
					title: '广告提示',
					content: '即将跳转到广告页面',
					success: (res) => {
						if (res.confirm) {
							console.log('跳转到广告:', adItem.title);
						}
					}
				});
			},
			
			formatTime(timeString) {
				if (!timeString) return '';
				const time = new Date(timeString);
				return time.toLocaleDateString();
			},
			
			getImageUrl(filename) {
				return `/static/${filename}`;
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.tab-banner {
		background: #fff;
		border-bottom: 1px solid #eee;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.tab-scroll {
		white-space: nowrap;
		height: 44px;
	}

	.tab-box {
		display: inline-flex;
		height: 100%;
	}

	.tab-item {
		padding: 0 15px;
		line-height: 44px;
		font-size: 16px;
		color: #666;
		position: relative;
		flex-shrink: 0;
	}

	.tab-item.active {
		color: #f00;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 15px;
		right: 15px;
		height: 2px;
		background: #f00;
	}

	.header-section {
		background: #fff;
		padding: 12px 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #f0f0f0;
		box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	}

	.weather-info {
		display: flex;
		align-items: center;
		flex: 1;
		max-width: 45%;
		padding: 8px 12px;
		background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
		border-radius: 10px;
		border: 1px solid #e1f0ff;
	}

	.weather-main {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 12px;
		padding-right: 12px;
		border-right: 1px solid #d1e9ff;
	}

	.weather-temp {
		font-size: 20px;
		font-weight: bold;
		color: #1890ff;
		line-height: 1.2;
	}

	.weather-desc {
		font-size: 12px;
		color: #666;
		margin-top: 2px;
	}

	.weather-location {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin-right: 10px;
	}

	.location-name {
		font-size: 14px;
		font-weight: 500;
		color: #333;
		margin-bottom: 2px;
	}

	.weather-pm {
		font-size: 12px;
		color: #52c41a;
	}

	.weather-refresh {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.refresh-text {
		font-size: 10px;
		color: #999;
		background: rgba(255,255,255,0.7);
		padding: 2px 6px;
		border-radius: 8px;
	}

	.search-box {
		flex: 1;
		max-width: 50%;
		margin-left: 12px;
	}

	.custom-search {
		display: flex;
		align-items: center;
		background: #f5f5f5;
		border-radius: 20px;
		padding: 8px 15px;
		height: 36px;
		border: 1px solid #e8e8e8;
		transition: all 0.3s;
	}

	.custom-search:focus-within {
		background: #fff;
		border-color: #1890ff;
		box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
	}

	.search-icon {
		margin-right: 8px;
		color: #999;
		font-size: 16px;
	}

	.search-input {
		flex: 1;
		height: 100%;
		font-size: 14px;
		color: #333;
	}

	.search-input::placeholder {
		color: #999;
	}

	.clear-btn {
		color: #999;
		font-size: 18px;
		padding: 0 5px;
		line-height: 1;
	}

	.refresh-tip {
		background: #52c41a;
		color: white;
		text-align: center;
		padding: 8px;
		font-size: 14px;
		animation: slideDown 0.3s ease;
	}

	@keyframes slideDown {
		from {
			transform: translateY(-100%);
			opacity: 0;
		}
		to {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.news-list {
		height: calc(100vh - 140px);
	}

	.news-item {
		margin-bottom: 8px;
	}

	.ad-card {
		background: #fff;
		margin: 0 10px 10px 10px;
		padding: 15px;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	}

	.ad-header {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
	}

	.ad-tag {
		font-size: 12px;
		color: #999;
		background: #f0f0f0;
		padding: 2px 6px;
		border-radius: 3px;
		margin-right: 8px;
	}

	.ad-source {
		font-size: 12px;
		color: #666;
	}

	.ad-title {
		font-size: 14px;
		color: #333;
		line-height: 1.4;
		margin-bottom: 10px;
		display: block;
	}

	.ad-images {
		display: flex;
		justify-content: space-between;
	}

	.ad-image {
		width: 100px;
		height: 70px;
		border-radius: 4px;
	}

	.search-content {
		margin-top: 10px;
		padding: 10px;
		background-color: #f8f8f8;
		border-radius: 4px;
	}

	.search-text {
		font-size: 14px;
		color: #007aff;
	}

	.no-result {
		text-align: center;
		padding: 40px 20px;
		color: #999;
		font-size: 16px;
	}

	.comment-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		border-radius: 20px 20px 0 0;
		max-height: 80%;
		display: flex;
		flex-direction: column;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		border-bottom: 1px solid #f0f0f0;
	}

	.modal-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.modal-close {
		font-size: 24px;
		color: #999;
		padding: 5px;
	}

	.comment-list {
		flex: 1;
		padding: 10px;
	}

	.comment-item {
		display: flex;
		padding: 10px 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.comment-avatar {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		margin-right: 10px;
	}

	.comment-content {
		flex: 1;
	}

	.comment-user {
		font-size: 14px;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 5px;
	}

	.comment-text {
		font-size: 14px;
		color: #333;
		display: block;
		margin-bottom: 5px;
	}

	.comment-time {
		font-size: 12px;
		color: #999;
	}

	.comment-input-area {
		display: flex;
		padding: 10px;
		border-top: 1px solid #f0f0f0;
	}

	.comment-input {
		flex: 1;
		height: 40px;
		border: 1px solid #e0e0e0;
		border-radius: 20px;
		padding: 0 15px;
		margin-right: 10px;
	}

	.comment-btn {
		background: #007aff;
		color: #fff;
		border: none;
		border-radius: 20px;
		padding: 0 20px;
		height: 40px;
	}

	.comment-btn.disabled {
		background: #ccc;
	}

	.login-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}

	.login-modal .modal-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		background: #fff;
		border-radius: 10px;
		padding: 20px;
		text-align: center;
	}

	.login-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 10px;
	}

	.login-message {
		font-size: 14px;
		color: #666;
		display: block;
		margin-bottom: 20px;
	}

	.login-buttons {
		display: flex;
		justify-content: space-between;
	}

	.login-btn {
		flex: 1;
		height: 40px;
		border: none;
		border-radius: 20px;
		margin: 0 5px;
	}

	.login-btn.cancel {
		background: #f0f0f0;
		color: #333;
	}

	.login-btn.confirm {
		background: #007aff;
		color: #fff;
	}
</style>
